import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Tabs, Button, Card, Table, Form, Input, Icon, Breadcrumb, Modal } from 'antd';
import { Link } from 'dva/router';

const Search = Input.Search;


class RoleGroup extends React.Component {
    state = {
        pageIndex: 1,
        pageSize: 10,
        name: ''
    }
    postUrl = {
        addUrl: '/rolegroupedit',
        deleteUrl: 'rolegroup/delete',
        getPagesUrl: 'rolegroup/getpages'
    }
    columns = [
        { title: '角色组名称', dataIndex: 'name', key: 'name' },
        { title: '数据等级', dataIndex: 'roleDataLevel', key: 'roleDataLevel' },
        { title: '备注', dataIndex: 'remark', key: 'remark' },
        { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
        {
            title: '操作', dataIndex: 'guid', key: 'guid',
            render: (text, record) => (
                <span>
                    {this.getMenuPower('update', text, record)}
                    {this.getMenuPower('delete', text, record)}
                </span>
            ),
        },
    ];

    getAddPower() {
        const { actionpower } = this.props.power;
        if (actionpower) {
            var thisaction = actionpower.actions.find(function (value) {
                return value.parameter == 'create';
            });
            if (thisaction) {
                return <Link to={this.postUrl.addUrl}><Button type="primary" icon={'plus-circle-o'}>添加</Button></Link>;
            }
        }
    }

    getMenuPower(power, text, record) {
        const { actionpower } = this.props.power;
        if (actionpower) {
            var thisaction = actionpower.actions.find(function (value) {
                return value.parameter == power;
            });
            if (thisaction) {
                if (power == "update") {
                    return <span className={'menu-dot'}>
                        <Link to={this.postUrl.addUrl + '/' + text} >修改</Link>
                    </span>
                }
                if (power == "delete") {
                    return <span className={'menu-dot'}>
                        <a href="javascript:void(0);" onClick={(e) => { this.delete(text) }}>删除</a>
                    </span>
                }
            }
        }
    }
    componentDidMount() {
        const { actionpower } = this.props.power;
        if (actionpower == undefined) {
            this.props.dispatch({ type: 'power/setpower', payload: this.props.location.pathname });
        }
    }
    pageChange = (page, pageSize) => {
        this.getPageDate(page, pageSize);
    }
    nameChange = (e) => {
        this.setState({
            name: e.target.value
        })
    }

    search = (e) => {
        this.getPageDate(1, 10);
    }
    delete = (value) => {
        Modal.confirm({
            title: '是否删除这条数据！！！',
            content: '删除后，无法还原！',
            okText: '删除',
            cancelText: '取消',
            maskClosable: true,
            onOk: () => {
                this.props.dispatch({ type: this.postUrl.deleteUrl, payload: { guid: value } })
            },
            onCancel: () => { }
        });

    }
    reSearch = () => {
        this.getPageDate(this.state.pageIndex, this.state.pageSize);
    }
    getPageDate = (pageIndex, pageSize) => {
        this.setState({
            pageIndex: pageIndex,
            pageSize: pageSize
        })
        var data = {
            PageIndex: pageIndex,
            PageSize: pageSize,
            RoleGroupName: this.state.name
        }
        this.props.dispatch({ type: this.postUrl.getPagesUrl, payload: data })
    }
    render() {
        const { pages, postloading } = this.props.rolegroup;
        const { addUrl } = this.postUrl;
        return (
            <div>
                <Card style={{ marginBottom: '10px' }}>
                    <Breadcrumb className='edu-breadcrumb' >
                        <Breadcrumb.Item href="">
                            <Icon type="home" />
                        </Breadcrumb.Item>
                        <Breadcrumb.Item href="">
                            角色组管理
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </Card>
                <Card>
                    <div className='edu-handler'>
                        <div className='handler-box'>
                            {this.getAddPower()}
                            <Button type="primary" onClick={this.reSearch} icon={'reload'} style={{ marginLeft: '10px' }}>刷新</Button>
                        </div>
                        <div className='search-box'>
                            <Input onChange={this.nameChange} style={{ width: '150px' }} placeholder="角色组名称" />
                            <Button type="primary" onClick={this.search}><Icon type={'search'}></Icon></Button>
                        </div>
                    </div>
                    <Table
                        loading={postloading}
                        bordered={true}
                        columns={this.columns}
                        dataSource={pages.items}

                        pagination={{
                            showTotal: (total, range) => `当前：${range[0]}-${range[1]}总数： ${total} 条`,
                            pageSize: 10,
                            showQuickJumper: true,
                            total: pages.totalItems,
                            onChange: this.pageChange
                        }}
                    />
                </Card>
            </div>)
    }
}
RoleGroup.propTypes = {
    dispatch: PropTypes.func
}

export default connect(({ rolegroup, power }) => ({ rolegroup, power }))(RoleGroup);